<div [fxLayout]="col ? 'column' : 'rows wrap'" fxLayoutGap="1rem">
  <nz-table
    #nestedTable
    #middleTable
    nzSize="middle"
    [nzData]="unit.production"
    [nzShowPagination]="false"
    class="prod-table"
  >
    <thead>
      <tr>
        <th>Product</th>
        <th>Ratio</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <ng-template
        ngFor
        let-data
        [ngForOf]="nestedTable.data"
        [ngForTrackBy]="getProdId"
      >
        <tr>
          <td [ngClass]="data.product.colorClass">
            <i
              nz-icon
              [nzType]="data.product.icon"
              [style.color]="data.product.color"
            ></i>
            {{ data.product.name }}
          </td>
          <td>
            <span
              nz-text
              class="monospace"
              [nzType]="data.ratio.gte(0) ? '' : 'danger'"
              >{{ data.prodPerSecFull | format }}</span
            >
          </td>
          <td class="total">
            <span
              nz-text
              class="monospace"
              [nzType]="data.ratio.gte(0) ? '' : 'danger'"
              >{{ data.prodPerSecFull.times(unit.quantity) | format }}</span
            >
          </td>
        </tr>
      </ng-template>
    </tbody>
  </nz-table>
  <div *ngIf="!expandable">
    <h3>General bonus</h3>
    <app-sub-table [positiveOnly]="false" [unit]="unit"></app-sub-table>
  </div>
  <div *ngIf="!expandable">
    <h3>Efficiency bonus</h3>
    <app-sub-table [positiveOnly]="true" [unit]="unit"></app-sub-table>
  </div>
  <nz-collapse *ngIf="expandable">
    <nz-collapse-panel
      nzHeader="General bonus - Yielded and consumed"
      [(nzActive)]="genBon"
    >
      <app-sub-table
        *ngIf="genBon"
        [positiveOnly]="false"
        [unit]="unit"
      ></app-sub-table>
    </nz-collapse-panel>
    <nz-collapse-panel
      nzHeader="Efficiency bonus - Yielded only"
      [(nzActive)]="effBon"
    >
      <app-sub-table
        *ngIf="effBon"
        [positiveOnly]="true"
        [unit]="unit"
      ></app-sub-table>
    </nz-collapse-panel>
  </nz-collapse>
</div>
